<!--
 * @Author: fankewen 835656320@qq.com
 * @Date: 2023-12-19 10:28:30
 * @LastEditors: fankewen 835656320@qq.com
 * @LastEditTime: 2023-12-19 17:44:36
 * @FilePath: \symbolimg\demo\src\views\ddd.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="Viewerbox">
      <div v-viewer="options" class="imgbox">
        <img :style="{ width: $px2rem('80px') }" :src="img" />
      </div>
    </div>
  </template>
  <script>
  export default {
    name: "VViewer",
    data() {
      return {
        //   img: "http://192.168.8.100/mapbox/images/5401003.png",
        options: { hide: this.hide, show: this.show, viewed: this.viewed },
      };
    },
    props: {
      img: {
        type: String,
        default: () => "",
      },
    },
    methods: {
      inited(viewer) {
        this.$viewer = viewer;
      },
      show() {
        console.log("show img");
      },
      hide() {
        console.log("hide img");
      },
      viewed() {
        console.log("viewed");
        //   this.$viewer.rotateTo(180);
      },
    },
    mounted() {
      console.log(37, this.img);
    },
  };
  </script>
  <style lang='scss' scoped>
  .Viewerbox {
    .imgbox {
      padding: 10px;
      width: 100px;
      height: 100px;
      object-fit: cover;
      box-sizing: border-box;
      border: 1.5px dashed rgb(146, 176, 241);
      border-radius: 4px;
    }
  }
  </style>